<template>
  <div class="lyricBox" :style="props.LyricInfo.lyricShow ? 'top : 75px ; ' : ''">
    <div class="lyric" v-if="props.LyricInfo.lyricShow">
      <div class="cdBox">
        <div class="cd">
          <img :src="props.LyricInfo.imgUrl" alt="" />
        </div>
      </div>
      <button @click="emit('lyricShow')">xiqweeeeeeeeeea</button>
      <div class="write">
        <div class="songInfo">
          <p class="songName">dai</p>
          <p class="author">daidai</p>
        </div>
        <div class="content" ref="lyricBoxRef">
          <p v-for="(a, i) in lyricWrite" :key="i" :class="{ active: i == activeNow }">
            {{ a[1] }}
          </p>
        </div>
      </div>
    </div>

    <Comment :comment="props.comment" v-if="props.comment.length" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from "vue";
import Comment from "@/components/comment.vue";
interface propsType {
  LyricInfo: LyricInfo;
  time: string;
  comment: comment[];
}
interface LyricInfo {
  imgUrl?: string;
  lyricShow: boolean;
  lyricWrite: string;
}
const emit = defineEmits(["lyricShow"]);
const props = defineProps<propsType>();
const lyricBoxRef = ref();
const activeNow = ref(0);
const lyricWrite = computed(() => {
  return props.LyricInfo.lyricWrite
    .split("[")
    .map((a) => a.split("]"))
    .splice(1);
});
const log = () => {
  console.log(props.comment);
  console.log(props.LyricInfo.imgUrl);
};

watch(
  () => props.time,
  (n, l) => {
    if (props.LyricInfo.lyricWrite) {
      lyricWrite.value.forEach((element, i) => {
        if (props.time == lyricWrite.value[i][0].split(".")[0]) {
          activeNow.value = i;
          if (activeNow.value > 5) {
            lyricBoxRef.value.scrollTop = (activeNow.value - 5) * 37;
          }
        }
      });
    }
  }
);
</script>

<style scoped lang="less">
.active {
  color: #2d8cf0;
  font-size: 20px;
}
.lyricBox {
  overflow-y: scroll;
  transition: top 0.3s;
  top: 100%;
  height: 100%;
  left: 0;
  position: fixed;
  background-color: #fff;
  width: 100%;
  padding: 0 321px 150px;
  box-sizing: border-box;

  &::-webkit-scrollbar {
    /* 横向滚动条的高 */
    width: 15px;
    background-color: deeppink;
    margin-right: 5px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #fff;
    height: 5px;
    margin-right: 5px;
  }
  .lyric {
    width: 100%;
    height: 515px;
    display: flex;
    .cdBox {
      flex: 60%;
      height: 515px;
      display: flex;
      align-items: center;
      .cd {
        margin: auto;
        width: calc(100% / 2.6);
        aspect-ratio: 1/1;
        background-color: #0e0e11;
        border-radius: 50%;
        text-align: center;
        box-sizing: border-box;
        overflow: hidden;
        animation: rotate 60s linear infinite;

        > img {
          margin-top: 50%;
          transform: translateY(-50%);
          width: 70%;
          height: 70%;
          border-radius: 50%;
        }
      }
    }
    .write {
      flex: 40%;
      height: 515px;
      .songInfo {
        width: 100%;
        height: 63px;
      }
      .content {
        z-index: 50;
        box-sizing: border-box;
        height: calc(100% - 63px);
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        // 滚动轨道
        &::-webkit-scrollbar {
          width: 0;
        }

        > P {
          scroll-snap-align: start;
          line-height: 30px;
          height: 30px;
          margin: 7px 0;
        }
      }
    }
  }
}
@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}
</style>
